<template>
  <div class="dashboard-container">
    <!-- 顶部导航 -->
    <el-header class="bg-white shadow-sm flex items-center justify-between" style="height: 20px">
      <div class="text-2xl font-bold text-blue-600">视频管理控制台</div>

    </el-header>

    <!-- 主内容区 -->
    <el-main class="!p-6">
      <!-- 轮播图 -->
      <el-card shadow="never" class="mb-6">
<!--        <div style="position: relative;top: -20px">本周热门</div>-->
        <div style="position: relative;top: -10px">本周热门</div>
        <el-carousel
            height="400px"
            :interval="5000"
            trigger="hover"
            arrow="always"
        >
          <el-carousel-item
              v-for="(video, index) in hotVideos"
              :key="index"
              class="relative"
          >
            <el-image
                fit="cover"
                style="height: 400px;width: 100%"
                :src="video.videoCover"
                class="h-full w-full object-cover"
            ></el-image>
            <div class="carousel-caption">
              <h3 class="text-2xl font-bold mb-2">{{ video.videoTitle }}</h3>
              <div class="flex items-center gap-2">
                <el-icon><i-ep-video-play /></el-icon>
                <span>播放量：{{ formatNumber(video.playCount) }}</span>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </el-card>

      <!-- 数据统计 -->
      <el-row :gutter="20" class="mb-6">
        <el-col
            v-for="item in stats"
            :key="item.title"
            :xs="24"
            :sm="12"
            :md="6"
        >
          <el-card shadow="hover" class="stat-card">
            <div class="flex items-center">
              <div class="icon-wrapper" :style="{background: item.color}">
                <el-icon :size="28" color="white">
                  <component :is="item.icon" />
                </el-icon>
              </div>
              <div class="ml-4">
<!--                <div class="text-gray-500 text-sm">{{ item.title }}</div>-->
<!--                <div class="text-2xl font-bold">{{ item.value }}</div>-->
                <el-statistic :title="item.title " :value="item.value " />
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>


    </el-main>
  </div>
</template>

<script setup>
import {ref, computed, onMounted, reactive} from 'vue'
import {getAdditionalStat, getHotVideos} from "@/api/admin-api.js";
import {ChatDotRound} from "@element-plus/icons-vue";

// 假数据 - 热榜视频
const hotVideos = ref([
  {
    videoCover: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    videoTitle: '【4K风景】绝美雪山航拍',
    playCount: 1234567
  },

  {
    videoCover: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    videoTitle: '【4K风景】绝美雪山航拍',
    playCount: 1234567
  }, {
    videoCover: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    videoTitle: '【4K风景】绝美雪山航拍',
    playCount: 1234567
  },
  // 其他4个视频数据...
])

onMounted(async ()=>{
  // video数据
  const res = await getHotVideos()
  console.log(res)
  hotVideos.value = res.data
  // 统计数据
  const date = new Date()
  console.log(date)
  let trueMonth = (date.getMonth() + 1) <= 9? '0'+(date.getMonth() + 1):(date.getMonth() + 1)
  let trueDate = (date.getDate() + 1) <= 9? '0'+(date.getDate() + 1):(date.getDate() + 1)
  const timeStr = date.getFullYear() + '-' + trueMonth + '-' + trueDate + ' 00:00:00'
  console.log(date)
  const r = await getAdditionalStat(timeStr,7)
  console.log(r)
  stats[0].value = r.data.userCount
  stats[1].value = r.data.videoCount
  stats[2].value = r.data.commentCount
  stats[3].value = r.data.danmakuCount
})



// 统计卡片数据
const stats = reactive([
  {
    title: '本周新增用户数',
    value: '1,234,567',
    icon: 'user',
    color: '#409EFF'
  },
  {
    title: '本周新增视频数',
    value: '56,789',
    icon: 'video-play',
    color: '#F56C6C'
  },
  {
    title: '本周新增评论数',
    value: '2,345,678',
    icon: 'chat-line-round',
    color: '#67C23A'
  },
  {
    title: '本周新增弹幕数',
    value: '12,345,678',
    icon: 'chat-line-square',
    color: '#E6A23C'
  },
  // {
  //   title: '本周新增动态数',
  //   value: '12,345,678',
  //   icon: 'chat-line-square',
  //   color: '#E6A23C'
  // }
])

const data = ref([
  {
    userCount:1,
    videoCount:1,
    comment:1,
    danmaku:1
  }
])




// 通知系统
const notifications = ref([
  {
    title: '新用户反馈',
    content: '用户建议增加夜间模式功能',
    type: 'feedback',
    time: '5分钟前',
    read: false
  },
  // 更多通知...
])



const notificationVisible = ref(false)
const unreadCount = computed(() =>
    notifications.value.filter(n => !n.read).length
)

// 方法
const showNotifications = () => {
  notificationVisible.value = true
}

const markAllRead = () => {
  notifications.value.forEach(n => n.read = true)
}

const formatNumber = (num) => {
  return num.toLocaleString()
}
</script>

<style scoped lang="scss">
.dashboard-container {
  height: 100vh;
  background: #f0f2f5;

  .carousel-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: white;
  }

  .stat-card {
    .icon-wrapper {
      width: 50px;
      height: 50px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .notification-panel {
    padding: 1rem;

    .notification-item {
      padding: 1rem;
      border-radius: 6px;
      transition: background 0.3s;
      cursor: pointer;

      &.unread {
        background: #f6faff;
      }

      &:hover {
        background: #f0f2f5;
      }
    }
  }
}
</style>